<template>
  <div>
    <!-- <h2>This is Tab 1 content</h2> -->
    <div class="Top-parameter">
      <div class="parameter-item">
        <div class="param-label">
          蒙版边缘模糊度
          <el-input-number
            v-model="hires.steps"
            :min="0"
            :controls="false"
            class="compact-input"
          />
        </div>

        <div class="param-control">
          <el-slider
            v-model="hires.steps"
            :min="0"
            :max="100"
            class="param-slider"
          />
        </div>
      </div>

      <div class="parameter-item">
        <div class="param-label">
          蒙版透明度
          <el-input-number
            v-model="hires.steps"
            :min="0"
            :controls="false"
            class="compact-input"
          />
        </div>

        <div class="param-control">
          <el-slider
            v-model="hires.steps"
            :min="0"
            :max="100"
            class="param-slider"
          />
        </div>
      </div>
    </div>
    <div class="Item-parameter">
      <div class="title">蒙版模式</div>
      <el-radio-group v-model="mode">
        <el-radio label="again">重绘蒙版内容</el-radio>
        <el-radio label="original">重绘非蒙版内容</el-radio>
      </el-radio-group>
    </div>
    <div class="Item-parameter">
      <div class="title">蒙版区域内容处理</div>
      <el-radio-group v-model="mode">
        <el-radio label="again">填充</el-radio>
        <el-radio label="original">原版</el-radio>
        <el-radio label="original">潜空间噪声</el-radio>
        <el-radio label="original">空白潜空间</el-radio>
      </el-radio-group>
    </div>
    <div class="Tab-end">
      <div class="Item-parameter">
        <div class="title">重绘区域</div>
        <el-radio-group v-model="mode">
          <el-radio label="again">整张图片</el-radio>
          <el-radio label="original">仅蒙版区域</el-radio>
        </el-radio-group>
      </div>
      <div class="parameter-item">
        <div class="param-label">
          仅蒙版区域下边缘预留像素
          <el-input-number
            v-model="hires.steps"
            :min="0"
            :controls="false"
            class="compact-input"
          />
        </div>

        <div class="param-control">
          <el-slider
            v-model="hires.steps"
            :min="0"
            :max="100"
            class="param-slider"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Tab1",
  data() {
    return {
      mode: "again",
      hires: {
        // Hires 部分的配置
        algorithm: "latent", // 采用的算法
        steps: 0, // 步骤
        denoising: 0.7, // 降噪系数
        width: 0, // 输出宽度
        height: 0, // 输出高度
      },
    };
  },
};
</script>
<style lang="scss">
.param-label {
  border-left: 3px solid #427aef !important;
  padding-left: 20px;
  font-size: 20px;
  font-weight: 600;
  // display: flex;
}
.Top-parameter {
  display: flex;

  .parameter-item {
    width: 260px;
    // display: inline;
    display: inline-block;
    // background-color: antiquewhite;
    margin-left: 10px;
    line-height: 38px;
    .el-input-number {
      width: 69px;
      height: 28px !important;
      float: right;
    }
    .param-slider {
      padding-left: 30px;
    }
  }
}
.Tab-end {
  display: flex;
  // background-color: #2f51ff;
  .Item-parameter{
    .el-radio-group{
      // width: 200px;
      display: flex;
      justify-content: center;
      // background-color: #427aef;
    }
  }
  .parameter-item{
    margin-left: 50px;
    .param-label{
      display: flex;
      font-size: 14px;
      border-left: none !important;
    }
    .el-input-number {
      width: 69px;
      height: 28px !important;
      float: right;
    }
  }
}
.Item-parameter {
  margin: 10px 0;
  .title {
    font-size: 17px;
    font-weight: 600;
    margin-left: 20px;
  }
}
.el-radio-group {
  margin: 20px 0;
  padding-left: 30px;
  .el-radio__label {
    font-size: 16px;
  }
  .is-checked {
    .el-radio__inner {
      // background-color: #2e4ff1;
      background-color: #fff;
    }
    .el-radio__label {
      color: #2f51ff;
    }
  }
  .el-radio__inner {
    border: 1px solid #2f51ff;
  }
  .el-radio__inner::after {
    background-color: #2f51ff;
    width: 7px;
    height: 7px;
  }
}
</style>
